<script lang="js" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { webglFluidSimulationStart } from './webgl-fluid-simulation'

const canvasRef = ref()
let webglFluidSimulation = null

onMounted(() => {
  webglFluidSimulation = webglFluidSimulationStart(canvasRef.value, {
    TRIGGER: 'hover'
  })
})

onBeforeUnmount(() => {
  if (webglFluidSimulation) {
    webglFluidSimulation.destroy()
  }
})
</script>

<template>
  <canvas ref="canvasRef" style="width: 100%; height: 100%"></canvas>
</template>
